<template>
  <div>
    <Dialog>
      <!-- 头部 -->
      <template #header>
        <h1>我是[具名插槽]头部内容</h1>
      </template>

      <!-- 块（会覆盖相同名字的插槽） -->
      <template #[slotName]>
        <h2>我是[动态插槽名]内容</h2>
      </template>

      <!-- 主体 -->
      <template #default="{ item, index }">
        <h2>
          [我是匿名插槽+作用域插槽内容] {{ index }} -- {{ item.name }} --
          {{ item.age }}
        </h2>
      </template>

      <!-- 底部 -->
      <template #footer>
        <h2>我是[具名插槽]底部内容</h2>
      </template>
    </Dialog>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import Dialog from "./Dialog.vue";

const slotName = ref("header");
</script>

<style scoped></style>
